<template>
  <div class="register">
    <div class="header-warpper" @click="$router.back(-1)">
      <img src="../assets/l_jt.png" alt />
      <span>注册</span>
    </div>
    <div class="logo">
      <img src="../assets/logo.png" alt />
    </div>
    <div v-if="step">
      <div class="m-input-box">
        <input v-model="mobile" class="m-input" type="text" placeholder="请输入手机号码" maxlength="20" />
      </div>
      <div class="m-input-box">
        <input v-model="password" class="m-input" type="password" placeholder="登录密码" maxlength="16" />
      </div>
      <div class="m-input-box">
        <input v-model="con_pass" class="m-input" type="password" placeholder="确认密码" maxlength="16" />
      </div>
      <div class="m-input-box">
        <input v-model="code" class="m-input" type="text" placeholder="邀请码（必填）" maxlength="15" />
      </div>
      <div class="btn-box">
        <button class="red_btn" @click="next">下一步</button>
      </div>
    </div>
    <Verify
      style="margin-top:.4rem; z-index:0"
      v-if="modalShow"
      @success="send_code()"
      @error="error()"
      :barSize="{width:'100%',height:'40px'}"
      :showButton="false"
      :type="3"
    ></Verify>
    <div v-if="codeShow" class="m-input-box" style="margin-top:.8rem;position:relation">
      <input v-model="get_code" class="m-input" type="text" placeholder="请输入验证码" maxlength="20" />
      <div v-html="djs" @click="send_code" class="send_code"></div>
    </div>
    <div v-if="modalShow" class="save-line-box">
      <i class="fl">
        <img @click="chooseImg" :src="simg" alt />
      </i>
      <span @click="showPopup('myPopup')">
        我已阅读并同意
        《币币赚 用户协议》
      </span>
    </div>

    <div v-if="modalShow" class="btn-box">
      <button class="red_btn" @click="register">注册</button>
    </div>
    <div class="other-link">
      <!--<p style="color:#e56337;">-->
      <!--<router-link to="/e_register">邮箱注册</router-link>-->
      <!--</p>-->
      <p class="fixed-bottom">
        <span class="f_bold">已有币币赚账号？</span>
        <router-link to="/" class="register">账号登录</router-link>
      </p>
    </div>
    <div class="my-popup" @click="hide" ref="myPopup">
      <div class="xy_content" @click="ishide" v-html="centen"></div>
    </div>
  </div>
</template>

<script>
import Verify from "vue2-verify";
import { setInterval, clearInterval, setTimeout } from "timers";
import { constants } from "crypto";

export default {
  name: "register",
  components: {
    Verify
  },
  data() {
    return {
      istrue: true,
      simg: require("../assets/ywxz.png"),
      mobile: "",
      password: "",
      con_pass: "",
      code: "",
      get_code: "",
      modalShow: false,
      step: true,
      djs: "",
      codeShow: false,
      centen: ""
    };
  },
  created() {
    var invite_code = this.$route.query.invite_code;
    // console.log(invite_code,'聊聊')
    invite_code ? (this.code = invite_code) : "";
    this.$axios.post("/index/Usercenter/deal").then(res => {
      this.centen = res.data.info.content;
    });
  },
  mounted() {
    setTimeout(() => {
      var dom = document.getElementsByClassName("icon-right");
        document.styleSheets[0].addRule('.icon-right::before', 'z-index:0 !important');
      console.log(dom, " kk流量",s);
    }, 100);
  },
  methods: {
    ishide(e) {
      e.stopPropagation();
      return false;
    },
    hide() {
      this.$refs.myPopup.style.display = "none";
    },
    rerender: function() {
      this.modalShow = false;
      setTimeout(() => {
        this.modalShow = true;
      }, 10);
    },
    next() {
      this.step = false;
      this.modalShow = true;
    },
    showPopup(refId) {
      this.$refs.myPopup.style.display = "block";
    },
    chooseImg() {
      if (this.istrue) {
        this.simg = require("../assets/yxz.png");
      } else {
        this.simg = require("../assets/ywxz.png");
      }
      this.istrue = !this.istrue;
    },
    send_code() {
      if (this.djs.indexOf("s") != -1) return;
      var reg = /^1[3456789]\d{9}$/;
      if (!this.mobile)
        return this.$createToast({ txt: "请输入手机号", type: "txt" }).show();
      if (!reg.test(this.mobile)) {
        return this.$createToast({
          txt: "请输入正确手机号",
          type: "txt"
        }).show();
      }
      this.codeShow = true;
      this.$axios
        .post("/index/publics/send", { mobile: this.mobile })
        .then(res => {
          if (res.data.code == 0) {
            this.$createToast({
              txt: "发送成功",
              type: "txt"
            }).show();
            this.djs = "60s";
            var ts = this;
            var time = setInterval(function() {
              var num1 = parseInt(ts.djs);
              if (num1 <= 1) {
                ts.djs = "重新发送";
                clearInterval(time);
              } else {
                ts.djs = --num1 + "s";
              }
            }, 1000);
          } else {
            this.rerender();
            this.$createToast({ txt: res.data.message, type: "txt" }).show();
          }
        });
    },
    register() {
      var reg = /^1[3456789]\d{9}$/;
      if (!this.mobile)
        return this.$createToast({ txt: "请输入手机号", type: "txt" }).show();
      if (!reg.test(this.mobile)) {
        return this.$createToast({
          txt: "请输入正确手机号",
          type: "txt"
        }).show();
      }
      if (!this.code)
        return this.$createToast({ txt: "请输入邀请码", type: "txt" }).show();
      if (!this.password)
        return this.$createToast({ txt: "请输入密码", type: "txt" }).show();
      if (!this.con_pass)
        return this.$createToast({ txt: "请输入确认密码", type: "txt" }).show();
      if (this.password !== this.con_pass) {
        return this.$createToast({ txt: "两次密码不一致", type: "txt" }).show();
      }
      if (this.istrue) {
        return this.$createToast({ txt: "请勾选用户协议", type: "txt" }).show();
      }
      this.$axios
        .post("/index/publics/doRegister", {
          type: 1,
          mobile: this.mobile,
          password: this.password,
          invite_code: this.code,
          code: this.get_code
        })
        .then(res => {
          if (res.data.code == 0) {
            this.$createToast({ txt: res.data.message, type: "txt" }).show();
            setTimeout(() => {
              this.$router.push("/");
            }, 1000);
          } else {
            this.rerender();
            this.$createToast({ txt: res.data.message, type: "txt" }).show();
          }
        });
    }
  }
};
</script>
<style scoped lang="less">
.f-flex {
  display: flex;
  display: -webkit-flex;
  align-items: center;
}
.xy_content {
  width: 80%;
  position: relative;
  max-height: 8rem;
  overflow-y: auto;
  margin: auto;
  top: 50%;
  margin-top: -4rem;
  background: #fff;
  padding: 0.533333rem 0.8rem;
}
.register {
  .logo {
    img {
      width: 2.266667rem;
      height: 2.266667rem;
    }
  }
  .send_code {
    position: absolute;
    right: 0;
    top: 1rem;
    font-size: 0.373333rem;
    color: #e56337;
  }
  .save-line-box {
    text-align: left;
    padding: 0.373333rem 0 1.12rem;
    color: #aab2ca;
    .icon-check {
      margin-right: 5px;
    }
  }
  padding: 0 0.4rem;
  .header-warpper {
    .f-flex();
    height: 1.333333rem;
    padding: 0;
    color: #000;
    img {
      width: 0.213333rem;
      height: 0.373333rem;
    }
    span {
      font-size: 0.48rem;
      padding-left: 0.2rem;
    }
  }
  .btn-box {
    padding-top: 1.173333rem;
  }
  .other-link {
    text-align: center;
    font-size: 0.426667rem;
    a {
      color: #e56337;
    }
    .fixed-bottom {
      padding-top: 1.706667rem;
    }
    .f_bold {
      color: #aab2ca;
      font-weight: bold;
    }
    p {
      padding-top: 0.6rem;
    }
  }
  .save-line-box {
    .f-flex();
    img {
      width: 0.453333rem;
    }
  }
}
.icon-right:before {
  z-index: 0;
}
.my-popup {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  top: 0;
  left: 0;
}
*, *::before, *::after{
  z-index: 0 !important;
}
</style>
